<template>
  <div class="login">
    <x-header v-show="!isWeChar">
      <div slot="default" class="common__header--title">{{pageTitle}}</div>
      <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
    </x-header>
    <div class="login_inputDiv">
      <x-input type="tel" v-model="mobile" :max="StrLenth.mobile" placeholder="请输入手机号码" :disabled="isSendOk">
        <img slot="label" style="padding-right:10px;display:block;" src="~assets/x3/ico/ico-input-linkMobile.png" width="18">
      </x-input>
      <!-- 密码登录 -->
      <div v-if="isPasswordLogin">
        <x-input type="password" v-model="password" :min="StrLenth.pwdMin" :max="StrLenth.pwdMax" placeholder="密码">
          <img slot="label" style="padding-right:10px;display:block;" src="~assets/x3/ico/password_lock.png" width="18">
        </x-input>
      </div>
      <x-input v-if="haveImgCode" v-model="imgCode" :max="StrLenth.img" placeholder="请输入图形码">
        <img slot="label" style="padding-right:10px;padding-top:5px;display:block;" src="~assets/x3/ico/ico-input-img_code.png" width="18">
        <span slot="right" class="img__code--change" @click="changeImgCode()">换一张</span>
        <img slot="right" class="img__code" :src="imgCodeSrc" @click="changeImgCode()">
      </x-input>
      <!-- 短信验证码登录 -->
      <div v-if="!isPasswordLogin">
        <x-input type="tel" :max="StrLenth.sms" v-model="mobileCode" placeholder="请输入短信验证码">
          <img slot="label" style="padding-right:10px;padding-top:5px;display:block;" src="~assets/x3/ico/ico-input-Mcode.png" width="18">

          <x-button action-type="button" slot="right" mini class="linkMobileCode" @click.native="sendSmsCode" :text="sendBtnText" :disabled="isSendOk"></x-button>

        </x-input>
      </div>
    </div>
    <div class="register_errorMsg" v-show="haveError">
      <badge text="!"></badge> {{errorMessage}}
    </div>
    <x-button :text="pageTitle" @click.native="processLogin" type="primary" class="login_process_btn"></x-button>
    <div class="login_change">
      <span @click="changeLoginWay">使用{{login_way_text}}{{pageTitle}}</span>&nbsp|
      <span @click="register">注册</span>
    </div>
  </div>
</template>
<script>
import { XHeader, XInput, XButton, Badge } from "vux";
import { RouteUrl, Mutations, StrLenth } from "src/common/const";
import Validation from "src/common/util/validation";
import { RequestUrl } from "src/common/url";
import { mapState } from "vuex";
export default {
  components: { XHeader, XInput, XButton, Badge },
  computed: mapState(["user", "isWeChar", "saveInsure"]),
  data() {
    return {
      StrLenth: {}, //字符长度常量
      pageTitle: "登录",
      mobile: "",
      password: "",
      mobileCode: "", //验证码
      isSendOk: false, //发送按钮是否禁用
      sendBtnText: "获取验证码", //发送按钮文本内容
      haveError: false, //是否显示错误
      errorMessage: "", //错误信息

      imgCodeSrc: RequestUrl.GET_VALIDATE_CODE, //验证码图片路径
      imgCode: "", //图形码
      isPasswordLogin: false, //默认密码登录
      login_way_text: "密码",
      haveImgCode: true //是否需要图形码,根据默认登录方式选择,false=动态码登录第一次不需要
    };
  },
  methods: {
    goBack() {
      //返回
      this.$common.goBack(this);
    },
    register() {
      this.$common.goUrl(this, RouteUrl.REGISTER);
    },
    changeImgCode() {
      this.imgCodeSrc = RequestUrl.GET_VALIDATE_CODE + "?a=" + Math.random();
    },
    // 发送验证码
    sendSmsCode() {
      /**
        * 发送验证码,返回data.msg=信息,data.state=0表示成功
        * isSendOk,true=禁用(disabled=true)
        * sendBtnText,验证码按钮文本显示内容
        */
      let imgcode = null;
      if (this.haveImgCode) {
        //需要图形码时传递参数
        imgcode = this.imgCode;
        //校验-图形码
        let msg = Validation.isImgCode(imgcode);
        if (msg != null) {
          this.errorMessage = msg;
          this.haveError = true;
          return;
        }
      }
      this.$common.sendSMS(this, this.mobile, imgcode, this.isSendOk, this.pageTitle);
    },
    //登录提交
    processLogin() {
      let initData = {
        TYPE: "FORM",
        mobile: this.mobile,
        refereeId: "",
        refereePro: ""
      };

      if (this.saveInsure.refereeData != false) {
        initData.refereeId = this.saveInsure.refereeData.userCode;
      }
      if (this.saveInsure.refereePro != false) {
        initData.refereePro = this.saveInsure.refereePro;
      }
      //密码登录
      if (this.isPasswordLogin) {
        if (Validation.isEmpty(initData.mobile)) {
          return "手机号不能为空";
        }
        //校验-手机号-11位数字即可
        let RegMoblie = new RegExp(/^\d{11}$/);
        if (!RegMoblie.test(initData.mobile)) {
          this.errorMessage = "手机号格式错误";
          this.haveError = true;
          return;
        }
        initData.password = this.password;
        initData.imgCode = this.imgCode;
        //校验-密码
        let msg = Validation.isPassword(initData.password);
        if (msg != null) {
          this.errorMessage = msg;
          this.haveError = true;
          return;
        }
        //校验-图形码
        msg = Validation.isImgCode(initData.imgCode);
        if (msg != null) {
          this.errorMessage = msg;
          this.haveError = true;
          return;
        }
        this.haveError = false;
        let _this = this;
        _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
        _this.$http.post(RequestUrl.LOGIN_BYPASSWORD, initData).then(function (res) {
          _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
          if (res.state != 0) {
            _this.changeImgCode();//更换图形验证码
            _this.errorMessage = res.result;
            _this.haveError = true;
            return;
          }
          //保存USER_INFO信息
          _this.$common.storeCommit(_this, Mutations.SAVE_USER_INFO, res.result);

          //判断是否有抽奖信息
          _this.$common.storeCommit(_this, Mutations.IS_SHOW_RED, _this);

          _this.$common.goUrl(_this, RouteUrl.MY);
        });
      } else {
        //校验-手机号
        let msg = Validation.isPhone11(initData.mobile);
        if (msg != null) {
          this.errorMessage = msg;
          this.haveError = true;
          return;
        }
        //默认请求无图形码接口
        let postUrl = RequestUrl.LOGIN_BY_MOBILE;
        initData.mobileCode = this.mobileCode;
        if (this.haveImgCode) {
          //登录 & 手机 & 图形码
          postUrl = RequestUrl.LOGIN_BY_MOBILE_IMG;
          initData.imgCode = this.imgCode;
          //校验-图形码
          msg = Validation.isImgCode(initData.imgCode);
          if (msg != null) {
            this.errorMessage = msg;
            this.haveError = true;
            return;
          }
        }
        //校验-手机验证码
        msg = Validation.isSmsCode(initData.mobileCode);
        if (msg != null) {
          this.errorMessage = msg;
          this.haveError = true;
          return;
        }
        this.haveError = false;
        let _this = this;
        _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
        _this.$http.post(postUrl, initData).then(function (res) {
          _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
          if (res.state != 0) {
            _this.changeImgCode();//更换图形验证码
            _this.errorMessage = res.result;
            _this.haveError = true; //显示错误信息
            // _this.haveImgCode = true; //第一次未启用时，启动图形码同时校验
            if (res.result.indexOf("已被") >= 0) {
              _this.isSendOk = false; //启用发送按钮和手机号输入
              _this.sendBtnText = "获取验证码";
              //清除验证码倒计时
              _this.$common.clearTimeOutForSms();
            }
            return;
          }
          //保存USER_INFO信息
          _this.$common.storeCommit(_this, Mutations.SAVE_USER_INFO, res.result);
          _this.$common.goUrl(_this, RouteUrl.MY);
        });
      }
    },
    changeLoginWay() {
      //更换登录方式
      this.errorMessage = ""; //清空错误提示
      this.haveError = false; //隐藏提示标签
      this.isPasswordLogin = !this.isPasswordLogin; //切换登录方式
      // this.haveImgCode = !this.haveImgCode;//切换显示图形码
      if (this.isPasswordLogin) {
        this.login_way_text = "动态码";
        // this.haveImgCode = true; //切换显示图形码
      } else {
        this.login_way_text = "密码";
        // this.haveImgCode = true; //切换显示图形码,false=手机登录第一次无需图形验证码
      }
    }
  },
  mounted() {
    document.title = this.pageTitle;
    this.StrLenth = StrLenth; //字符长度常量
    if (this.user.isLogin) {
      this.$common.goUrl(this, RouteUrl.MY);
    }
    this.$init.subPageInit(this);
    //初始验证码倒计时
    this.$common.clearTimeOutForSms();
  }
};
</script>
<style lang="scss" scoped>
//input区域
.login_inputDiv {
  margin: 10px auto;
  width: 95%;
  height: auto;
  border-radius: 5px;
  background-color: white;
  .weui-cell {
    border-top: 1px solid #efefef;
  }
  .weui-cell:before {
    border-top: 0px;
  }
}

//图形码
.img__code {
  width: 80px;
  height: 31px;
  margin-left: 3px;
  vertical-align: middle;
}

//换一张图形码
.img__code--change {
  margin-left: 3px;
  vertical-align: middle;
  font-size: 14px;
}

//获取验证码按钮
.linkMobileCode {
  padding: 0px;
  width: 80px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #C8161D;
  border: 1px solid #C8161D;
  background-color: white;
}

//登录按钮
.login_process_btn {
  width: 95%;
  font-size: 20px;
}

//切换登录方式按钮
.login_change {
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
  color: #C8161D;
  font-size: 14px;
}

.register_errorMsg {
  color: red;
  font-size: 14px;
  margin-left: 10px;
  height: 50px;
  line-height: 40px;
}

//修改默认按钮失效时背景颜色
.weui-btn_disabled.weui-btn_primary {
  background-color: #cfcfcf;
}
</style>
